<template>
	<div class="content">
		<view class="uni-form-item uni-column sousuo">
			<span>搜索:</span>
			<input class="uni-input" confirm-type="search" placeholder="姓名搜索" v-model="queryParams.userName" />
			<button style="margin: 0;" class="mini-btn" type="primary" size="mini" @click="filteruserlist">搜索</button>
		</view>
		<div class="content_table">

			<table class="center " v-if="userrows">
				<thead class="thead">
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>手机号</th>
						<th>部门</th>
						<th>性别</th>
						<th>详情</th>
					</tr>
				</thead>
				<tbody class="tbody">
					<tr v-for="(item, index) in userrows" :key="index">
						<td>{{ item.userId }}</td>
						<td>{{ item.nickName }}</td>
						<td>{{ item.phonenumber }}</td>
						<td>{{ item.dept.deptName }}</td>
						<td>{{ getSexText(item.sex) }}</td>
						<td class="td_text" @click="goUserdetails(item.userId)">详情</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="FooterPage">
			<view class="uni-list">
				<picker mode="selector" :range="numberRange" @change="handleChange">
					<view class="picker">
						当前 <span> {{ queryParams.pageNum }}</span>页
					</view>
				</picker>
			</view>,
			<view>
				<view class="uni-list">
					<picker mode="selector" :range="pagesize" @change="handleChangepage">
						<view class="picker">
							每页 <span> {{queryParams.pageSize }}</span>条
						</view>
					</picker>
				</view>
			</view>,
			<view>共{{total}}条</view>
		</div>
	</div>
</template>

<script>
	import {
		listUserByUniApp,
		deptTreeSelect
	} from '@/api/work/user.js'

	export default {
		data() {
			return {
				numberRange: null,
				pagesize: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
				userrows: null,
				deptTree: null,
				ids: [],
				sexs: [{
					text: '男',
					value: "0"
				}, {
					text: '女',
					value: "1"
				}],
				total: null,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userName: undefined,
					phonenumber: undefined,
					status: undefined,
				},
			}
		},
		methods: {
			getlist() {
				this.userrows = null
				Promise.all([listUserByUniApp(this.queryParams), deptTreeSelect()])
					.then(([userResponse, deptResponse]) => {

						this.numberRange = Array.from({
							length: Math.ceil((userResponse.total / this.queryParams.pageSize) + 1)
						}, (_, index) => index + 1);
						console.log(this.numberRange)
						this.userrows = userResponse.rows;
						this.total = userResponse.total;
						this.deptTree = deptResponse.data;
					})
					.catch(err => console.error(err));
			},

			filteruserlist() {
				this.getlist()
			},
			deptIdTree(deptId) {
				const department = this.deptTree.find(item => item.id === deptId);
				return department ? department.label : '';
			},
			getSexText(sexValue) {
				const sex = this.sexs.find(option => option.value === sexValue);
				return sex ? sex.text : '';
			},

			handleChange(event) {
				if (this.queryParams.pageNum == this.numberRange[event.detail.value]) {
					return
				} else {
					this.queryParams.pageNum = this.numberRange[event.detail.value]
					this.getlist()
				}
			},
			handleChangepage(event) {
				if (this.queryParams.pageSize == this.pagesize[event.detail.value]) {
					return
				} else {
					this.queryParams.pageSize = this.pagesize[event.detail.value]
					this.getlist()
				}
			},
			goUserdetails(userId) {
				uni.navigateTo({
					url: `/pages/work/Userdetails/Userdetails?userId=${userId}`
				});
			},
		},
		created() {
			this.getlist();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		width: 100%;
		height: 100%;
	}

	.sousuo {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100upx;
		margin-bottom: 10upx;
		border-bottom: 1upx solid #ddd;
		font-size: 18upx;

		.uni-input {
			border: 1upx solid #ddd;
			margin: 15upx;
			border-radius: 10upx;
		}
	}

	.content_table {
		display: flex;
		justify-content: center;
		text-align: center;
		margin: 0 15upx;
		padding-bottom: 80upx;
		background-color: #fff;
	}

	.picker {
		display: flex;
		text-align: center;

		span {
			display: block;
			width: 50upx;
			height: 30upx;
			border: 1upx solid #ddd;
			margin: 0 5upx;
		}
	}

	.td_text {
		color: #00aaff;
	}

	.td_text:active {
		color: #0055ff;
	}

	.FooterPage {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 10upx;
		right: 0;
		background-color: #fff;
	}


	.tbody {
		font-size: 14px;
	}

	.center {
		width: 100%;
		border-collapse: collapse;
	}



	.center td,
	.center th {
		border: 1px solid #ddd;
		padding: 10upx 0;
	}

	.center th {
		background-color: #f2f2f2;
	}
</style>